<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue2.0</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="js/vue.js"></script>
	<script src="js/jquery-1.11.2.js"></script>
	<style>
     body{
	background: #eee;
     	margin:50px;
     }
   </style>
</head>
<body> 
	 <div class="container"  id="app" >
	    <div class="panel panel-default">
	         <div class="panel-heading">学习Vue</div>
			  <div class="panel-body">
			   			<ul class="list-group">
			   			    <li class="list-group-item" v-for="(key,index) in lists">{{ key.text }}  <button class="btn btn-warning btn-xs pull-right" v-on:click="deletelist(index);">删除</button> </li>
			   			</ul>
			  </div>
		 </div>
		 
	     <form v-on:submit.prevent="addlist(newlists.text);"> <!-- submit方法必须作用在form表单才起作用 prevent是阻止默认提交表单的行为 阻止默认行为  -->
	      <p><input type="text" class="form-control" v-model="newlists.text" placeholder="请输入文本内容"/></p>
	      <p style="text-align:center;"><button class="btn btn-success" type="submit" >提交</button></p>
	     </form>	 
    
		
	 </div>
</body>
</html>
<script>
    var app =  new Vue({
    	el: "#app",
    	data : {
    		lists : [
    	     {text: "欢迎光临德莱联盟！"},
    	     {text: "欢迎光临德莱联盟2！"},
    	     {text: "欢迎光临德莱联盟3！"},
    	     ],
             newlists: {text: "" }
    	},
    	methods: {
    		addlist :function(textvalue){
    			if(textvalue.length < 1) {  alert("不允许为空!");  return;} 
    			this.lists.push({text: textvalue}); //添加一条数据	
    			this.newlists.text= "";
    			},
    	    deletelist:function(index){
    	    	this.lists.splice(index,1); //删除一条lists 删除的list下标为你传递过来的下标
    	    }
    	}
    });

</script>


